<template>
  <div class="wty-anim1">
    <button @click="show = !show">点击</button>
    <!--@绑定一个事件-->
    <transition name="fade">
      <p v-show="show">hello world</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    };
  }
};
</script>

<style>
p {
  background-color: red;
}
.fade-enter-active,
.fade-leave-active {
  transition: all 5s;
  background-color: red;
}
.fade.enter,
.fade-leave-to {
  background-color: black;
}
</style>
